<template>
  <div class="home-recommend">
    <h3 class="title">
      推荐商品
    </h3>
    <div class="items">
      <div class="item"
         v-for="item in items" :key="item.id"
          @click="clickItem(item.id)"
      >
        <div class="item-left">
          <img v-lazy="item.pic" alt="">
        </div>
        <div class="item-right">
          <h4 class="name">{{item.name}}</h4>
          <p class="desc">
            {{ item.characteristic ? item.characteristic :'暂无描述' }}
          </p>
          <div class="action">
            <span class="price">
              ￥ {{item.minPrice}}
            </span>
            <van-icon @click.stop="addCart(item)" color="#f66" size="24" class-prefix="icon" name="jia-tianchong
"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    clickItem (id) {
      this.$emit('clickItem', id)
    },
    addCart (item) {
      // 将逻辑在父组件中处理 处理加入购物车数据 增加购买数量 和 选中状态
      item = {
        ...item,
        num: 1,
        checked: true
      }
      this.$emit('addCart', item)
    }
  },
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
.title{
  line-height: 40px;
  background-color: #f2f2f2;
  font-size: 16px;
  font-weight: 100;
  padding-left: 10px;
}
.item{
  height: 180px;
  display: flex;
  align-items: center;
  &-left{
    height: 180px;
    img{
      width: 180px;
      height: 180px;

    }
  }
  &-right{
    flex:1;
    height: 180px;
    padding:0 10px;
    box-sizing: border-box;
    .name{
      font-weight: 100;
      font-size: 16px;
      line-height: 40px;
      color:#333;
    }
    .desc{
      line-height: 36px;
      font-size: 14px;
      color: #666;
    }
    .action{
      display: flex;
      justify-content: space-between;
      padding-right: 20px;
      box-sizing: border-box;
      align-items: center;
      .price{
        color: #ff2222;

      }
    }
  }
}
</style>
